<!-- 组件通过得收集的元素，提交给下一个组件
这里有一个error的简单逻辑，来判断是否是空，是的话要提醒显示
一旦不为空就要在点击提交事件之后把它设置为“” -->
<template>
  <form
    id="data-form-container"
    ref="form"
    @submit.prevent="handleSubmit"
    class="data-form-container"
  >
    <div class="form-item">

      <div class="input-area">
        <input
          type="text"
          maxlength="10"
          v-model="formData.nickname"
          placeholder="用户昵称"
          
        />
        <!-- 限制用户输入的最大字符数。在这个例子中，输入框最多允许输入 10 个字符。 -->
        <!-- 设置输入框的占位符文本。当输入框为空时，这个文本会显示在
          输入框中，提示用户需要输入什么内容。占位符文本在用户开始输入时会消失。 -->
        <span class="tip">{{formData.nickname.length}}/10</span>
      </div>

      <div class="error">{{ error.nickname }}</div>
    
    </div>

    <div class="form-item">

      <div class="text-area">
    
        <textarea
          maxlength="300"
          placeholder="输入内容"
          v-model="formData.content"
        >
      </textarea>

        <span class="tip">{{ formData.content.length }}/300</span>

      </div>

      <div class="error">{{ error.content }}</div>

    </div>

    <div class="form-item">

      <div class="button-area">

        <button :disabled="isSubmiting">

          {{ isSubmiting ? "提交中..." : "提交" }}

        </button>

      </div>

    </div>

  </form>

</template>

<script>
export default {
  data() {
    return {
      formData: {
        nickname: "",
        content: "",
      },
      error: {
        nickname: "",
        content: "",
      },
      isSubmiting: false,
    };
  },
  methods: {
    handleSubmit() {
      this.error.nickname =   this.formData.nickname ? "" : "请填写昵称";
      this.error.content =   this.formData.content ? "" : "请填写内容";
      //如果输入里，那么就把空传给error'
      //如果没输入，就把要提醒的值给error
      //刚开始是空值，后面不是空值了再提交的时候，错误信息就会变成空，所以不显示
      if (this.error.nickname || this.error.content) {
        // 有错误,就阻止提交
        return;
      }
      this.isSubmiting = true; // 正在提交，防止重复点击
      this.$emit("submit", this.formData, (successMsg) => {
        //这个用了调用外层的提交函数
        this.$showMessage({
          content: successMsg,
          type: "success",
          duration: 1000,
          container: this.$refs.form,
          callback: () => {
            this.isSubmiting = false;
            //提交成功，就把原本的清除
            this.formData.nickname = "";
            this.formData.content = "";
          },
        });
      }); // 让父组件来处理事件
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.data-form-container {
  margin-bottom: 20px;
  overflow: hidden;
}
.form-item {
  margin-bottom: 8px;
}
.input-area {
  width: 50%;
  position: relative;
}
.text-area {
  position: relative;
}
.tip {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #b4b8bc;
  font-size: 12px;
}
input,
textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  //这是标准的盒子模型。在这种模型下，元素的 width 和 height 只包括内容区域，不包括边框、内边距和外边距。
  border: 1px dashed @gray;
  outline: none;
  color: @words;
  font-size: 14px;
  border-radius: 4px;
  &:focus {
    border-color: @primary;
  }
}
input {
  padding: 0 15px;
  height: 40px;
}
textarea {
  resize: none;
  padding: 8px 15px;
  height: 120px;
}
.error {
  margin-top: 6px;
  color: @danger;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
}
button {
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  width: 100px;
  height: 34px;
  color: #fff;
  border-radius: 4px;
  background: @primary;
  &:hover {
    background: darken(@primary, 10%);
  }
  &:disabled {
    background: lighten(@primary, 20%);
    cursor: not-allowed;
  }
}
</style>
